<template>
  <div class="course-list">
    <div class="p-d b-f m-b">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="未完成">
        <div class="course-study-item cur">
          <div class="course-study-item-img">
            <div class="el-image" style="width: 100%; height: 100%;">
              <img src="@/assets/img/在线学习.png" class="el-image__inner">
            </div>
          </div>
          <div class="course-study-item-right">
            <div class="course-study-item-title">二十大报告延伸学习资料</div>
            <div class="course-study-item-school">中共中央党校(国家行政学院)</div>
            <div class="course-study-item-user">主讲人：中共中央党校(国家行政学院)</div>
            <div class="course-study-item-bottom">
              <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                class="el-progress gradient-progress el-progress--line el-progress--text-inside">
                <div class="el-progress-bar">
                  <div class="el-progress-bar__outer" style="height: 12px;">
                    <div class="el-progress-bar__inner" style="width: 20%;">
                      <div class="el-progress-bar__innerText">20%</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="course-study-item-btn cur">我要学习</div>
            </div>
          </div>
        </div>
        <div class="course-study-item cur">
          <div class="course-study-item-img">
            <div class="el-image" style="width: 100%; height: 100%;">
              <img src="@/assets/img/在线学习.png" class="el-image__inner">
            </div>
          </div>
          <div class="course-study-item-right">
            <div class="course-study-item-title">二十大报告延伸学习资料</div>
            <div class="course-study-item-school">中共中央党校(国家行政学院)</div>
            <div class="course-study-item-user">主讲人：中共中央党校(国家行政学院)</div>
            <div class="course-study-item-bottom">
              <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                class="el-progress gradient-progress el-progress--line el-progress--text-inside">
                <div class="el-progress-bar">
                  <div class="el-progress-bar__outer" style="height: 12px;">
                    <div class="el-progress-bar__inner" style="width: 20%;">
                      <div class="el-progress-bar__innerText">20%</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="course-study-item-btn cur">我要学习</div>
            </div>
          </div>
        </div>
        <div class="course-study-item cur">
          <div class="course-study-item-img">
            <div class="el-image" style="width: 100%; height: 100%;">
              <img src="@/assets/img/在线学习.png" class="el-image__inner">
            </div>
          </div>
          <div class="course-study-item-right">
            <div class="course-study-item-title">二十大报告延伸学习资料</div>
            <div class="course-study-item-school">中共中央党校(国家行政学院)</div>
            <div class="course-study-item-user">主讲人：中共中央党校(国家行政学院)</div>
            <div class="course-study-item-bottom">
              <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                class="el-progress gradient-progress el-progress--line el-progress--text-inside">
                <div class="el-progress-bar">
                  <div class="el-progress-bar__outer" style="height: 12px;">
                    <div class="el-progress-bar__inner" style="width: 20%;">
                      <div class="el-progress-bar__innerText">20%</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="course-study-item-btn cur">我要学习</div>
            </div>
          </div>
        </div>
        <div class="course-study-item cur">
          <div class="course-study-item-img">
            <div class="el-image" style="width: 100%; height: 100%;">
              <img src="@/assets/img/在线学习.png" class="el-image__inner">
            </div>
          </div>
          <div class="course-study-item-right">
            <div class="course-study-item-title">二十大报告延伸学习资料</div>
            <div class="course-study-item-school">中共中央党校(国家行政学院)</div>
            <div class="course-study-item-user">主讲人：中共中央党校(国家行政学院)</div>
            <div class="course-study-item-bottom">
              <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                class="el-progress gradient-progress el-progress--line el-progress--text-inside">
                <div class="el-progress-bar">
                  <div class="el-progress-bar__outer" style="height: 12px;">
                    <div class="el-progress-bar__inner" style="width: 20%;">
                      <div class="el-progress-bar__innerText">20%</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="course-study-item-btn cur">我要学习</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已完成">
        <div class="course-study-item cur">
          <div class="course-study-item-img">
            <div class="el-image" style="width: 100%; height: 100%;">
              <img src="@/assets/img/在线学习.png" class="el-image__inner">
            </div>
          </div>
          <div class="course-study-item-right">
            <div class="course-study-item-title">二十大报告延伸学习资料</div>
            <div class="course-study-item-school">中共中央党校(国家行政学院)</div>
            <div class="course-study-item-user">主讲人：中共中央党校(国家行政学院)</div>
            <div class="course-study-item-bottom">
              <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                class="el-progress gradient-progress el-progress--line el-progress--text-inside">
                <div class="el-progress-bar">
                  <div class="el-progress-bar__outer" style="height: 12px;">
                    <div class="el-progress-bar__inner" style="width: 100%;">
                      <div class="el-progress-bar__innerText">100%</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="course-study-item-btn cur">继续学习</div>
            </div>
          </div>
        </div>
        <div class="course-study-item cur">
          <div class="course-study-item-img">
            <div class="el-image" style="width: 100%; height: 100%;">
              <img src="@/assets/img/在线学习.png" class="el-image__inner">
            </div>
          </div>
          <div class="course-study-item-right">
            <div class="course-study-item-title">二十大报告延伸学习资料</div>
            <div class="course-study-item-school">中共中央党校(国家行政学院)</div>
            <div class="course-study-item-user">主讲人：中共中央党校(国家行政学院)</div>
            <div class="course-study-item-bottom">
              <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                class="el-progress gradient-progress el-progress--line el-progress--text-inside">
                <div class="el-progress-bar">
                  <div class="el-progress-bar__outer" style="height: 12px;">
                    <div class="el-progress-bar__inner" style="width: 100%;">
                      <div class="el-progress-bar__innerText">100%</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="course-study-item-btn cur">继续学习</div>
            </div>
          </div>
        </div>
        <div class="course-study-item cur">
          <div class="course-study-item-img">
            <div class="el-image" style="width: 100%; height: 100%;">
              <img src="@/assets/img/在线学习.png" class="el-image__inner">
            </div>
          </div>
          <div class="course-study-item-right">
            <div class="course-study-item-title">二十大报告延伸学习资料</div>
            <div class="course-study-item-school">中共中央党校(国家行政学院)</div>
            <div class="course-study-item-user">主讲人：中共中央党校(国家行政学院)</div>
            <div class="course-study-item-bottom">
              <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                class="el-progress gradient-progress el-progress--line el-progress--text-inside">
                <div class="el-progress-bar">
                  <div class="el-progress-bar__outer" style="height: 12px;">
                    <div class="el-progress-bar__inner" style="width: 100%;">
                      <div class="el-progress-bar__innerText">100%</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="course-study-item-btn cur">继续学习</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryString: {
        title: '',
        source: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '标题',
            prop: 'title',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入标题'
          },
          {
            type: 'Input',
            label: '来源',
            prop: 'source',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入来源'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
            this.getList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              title: '',
              source: ''
            }
            this.queryParams.currentPage = 1
            this.getList()
          }
        }
      ]
    }
  },
}
</script>

<style lang="less" scoped>
  .course-list {
    padding: 20px;
    .course-study-item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 10px 20px;
      margin-bottom: 30px;
      border-radius: 4px;
      background: #fff;
      border: 1px solid #f1f3f8;
      &:hover {
        -webkit-box-shadow: 0 2px 8px 0 rgba(23, 107, 252, 0.2);
        box-shadow: 0 2px 8px 0 rgba(23, 107, 252, 0.2);
      }
      .course-study-item-img {
        position: relative;
        width: 310px;
        height: 170px;
        margin-right: 30px;
        background-size: cover;
        background-position: 50%;
      }
      .el-image {
        position: relative;
        display: inline-block;
        overflow: hidden;
      }
    }
    .course-study-item-right {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
    }
    .course-study-item-title {
      font-size: 22px;
      font-weight: 600;
      color: #333;
      line-height: 30px;
    }
    .course-study-item-school {
      margin-top: 13px;
      font-size: 18px;
      font-weight: 400;
      color: #666;
      line-height: 25px;
    }
    .course-study-item-user {
      padding-left: 20px;
      background: url()
        0 no-repeat;
      background-size: 12px 14px;
    }
    .course-study-item-bottom {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-top: 16px;
    }
    .el-progress {
      width: 90%;
      line-height: 12px;
      .el-progress {
        width: 100%;
        line-height: 12px;
      }
      .el-progress-bar__inner {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        border-radius: 6px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        background: linear-gradient(7deg, #ff5e28, #ffaf00);
      }
      .el-progress-bar__outer {
        height: 12px !important;
        border-radius: 6px;
        background: #f0f0f0;
        overflow: visible;
      }
      .el-progress-bar__innerText {
        position: absolute;
        top: -21px;
        right: -18px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: 22px;
        padding: 0 6px;
        margin: 0;
        background: url()
          50% no-repeat;
        background-size: 100% 100%;
        text-align: center;
        font-size: 12px;
        line-height: 16px;
      }
    }
    .course-study-item .course-study-item-btn {
      cursor: pointer;
      width: 100px;
      height: 40px;
      line-height: 40px;
      background: -webkit-gradient(linear, left top, right top, from(#ffc08e), color-stop(100%, #ff4e1c), to(#ef6236));
      background: linear-gradient(90deg, #ffc08e, #ff4e1c 100%, #ef6236 0);
      -webkit-box-shadow: 0 2px 6px 0 rgba(255, 95, 44, 0.8);
      box-shadow: 0 2px 6px 0 rgba(255, 95, 44, 0.8);
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      text-align: center;
    }
  }
</style>